<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="400px">
        <div style="display: flex;">
          <mini_logo></mini_logo>
          <div style="margin-left: auto; text-align: right;">
            <web_head :is-hiden-creat="true"></web_head>
          </div>
        </div>
        <div style="padding: 20px;">
          <div>
            <ul style="font-size: 14px;color: #aaaaaa;line-height: 2em;">
              <li>在引用知识库的情况下，智能问答将依赖知识库中知识进行回答</li>
              <li>在无法获得有效回答的情况下请，重新换一种方式进行提问</li>
            </ul>
          </div>
          <div style="text-align: center;margin-top: 100px;">
            <el-button size="large" type="success" style="margin: auto;width: 70%;" @click="gotoCreatPage()" round
              plain>创建知识&nbsp;&nbsp;(&nbsp;使用当前问答内容&nbsp;)</el-button>
            <hr style="width: 200px;margin: auto;margin-top: 20px;margin-bottom: 20px;" />
            <el-button size="large" type="info" style="margin: auto;width: 70%;" @click="gotoHome()" round
              plain>返回首页</el-button>
          </div>
        </div>
      </el-aside>
      <el-main>
        <div style="background-color: var(--el-farms-win-bg-color);padding-bottom: 2px;">
          <ai_view ref="aiRef" :appkyes="['TRANSLATE', 'ABSTRACT']"></ai_view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import web_head from '../components/web_head.vue';
import ai_view from '../know_creat/components/ai_view.vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import mini_logo from '../know_creat/components/mini_logo.vue';
import type { SendMsg } from '@/types/ai/SendMsg';
import farmRoutUtils from '@/hook/farmRoutUtils';
import type { TalkMsg } from '@/types/ai/TalkMsg';
const route = useRoute();
const aiRef = ref();
const windowHeight = ref(window.innerHeight - 210);
const routWord = ref('');
import { useRouter } from 'vue-router';
const router = useRouter();

const updateWindowSize = () => {
  windowHeight.value = window.innerHeight - 210;
};

const gotoHome = () => {
  farmRoutUtils.goToHome();
}

/**
 * 用当前对话信息创建知识
 */
const gotoCreatPage = () => {
  const talks = aiRef.value.getTalkHtml() as TalkMsg[];
  let allHtml = "";
  for (const node of talks) {
    allHtml = allHtml + node.msg;
  }
  router.push({ path: '/knowCreat', query: { initHtml: allHtml } });
}


onMounted(() => {
  window.addEventListener('resize', updateWindowSize);
  if (route.query.word) {
    routWord.value = route.query.word as string;
    const msg = { msg: routWord.value } as SendMsg;
    aiRef.value.sendMsgByMsg(msg);
  }
});


onUnmounted(() => {
  window.removeEventListener('resize', updateWindowSize);
});

</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>
